// 轮播图
class Projects{
    constructor(){

        this.tbody = document.querySelector("tbody");
        this.url = "http://localhost:3000/api";

function Banner(index){
    // 1. 选择元素
    this.left = document.getElementById("left");
    this.right = document.getElementById("right");
    this.imgbox = document.querySelector(".imgbox");
    this.imgs = this.imgbox.children;
    // 并设置默认索引
    this.index = index;

    // 补全布局：
    // 根据实际的图片数量计算图片容器的尺寸
    this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px";
    // 根据默认索引，设置图片容器的真实位置
    this.imgbox.style.left = this.index * -this.imgs[0].offsetWidth + "px";

    // 2. 执行绑定点击事件
    this.addEvent();
}
Banner.prototype = {
    constructor:Banner,
    addEvent:function(){
        const that = this;
        // 绑定左按钮点击事件
        this.left.onclick = function(){
            // 4.1. 执行计算索引，--
            that.changeIndexLeft()
        }
        // 绑定右按钮点击事件
        this.right.onclick = function(){
            // 4.2. 执行计算索引，++
            that.changeIndexRight()
        }
    },
    changeIndexLeft:function(){
    //判断当前索引是否到了第0
        if(this.index===0){
            this.index=this.imgs.length-2;
            this.imgbox.style.left = -(this.imgbox.children.length-1) * this.imgbox.children[0].offsetWidth + "px";
        }else{
            this.index--
        }
        console.log(this.index);
        // 5.1. 执行改变图片容器位置
        this.changePos();
    },
    changeIndexRight:function(){
        // 计算索引：++
        if(this.index === this.imgs.length-1){
            // 无缝轮播图2：因为复制了第一张图放在了最后，那么最后一张图之后，要找到真正要显示的图片（第二张）
            this.index = 1;
            
            this.imgbox.style.left = 0;
        }else{
            this.index++;
        }
        // 5.2. 执行改变图片容器位置
        this.changePos();
    },
    changePos:function(){
        // 根据索引改变图片容器位置
        
        move(this.imgbox, {
            left: this.index * -this.imgs[0].offsetWidth
        })
    }

   
}
new Banner(0);

const right=document.getElementById("right");
var timer = setInterval(function(){
    this.right.onclick()
},3000)

 


// 选项卡
function Tab(){
    // 写属性，变量
    // 选择元素
    this.li = document.querySelectorAll(".s-box li");
    this.div = document.querySelectorAll(".scont>div");
    // 设置默认索引
    this.index = 0;

    // 选择元素之后，执行绑定事件
    this.addEvent();
}
// 写方法
Tab.prototype.addEvent = function(){
    const that = this;
    // console.log(this);
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        // 添加事件
        this.li[i].onclick= function(){
            // console.log(this)
            // 触发了事件，执行隐藏上一个
            that.hide();
            // 执行获取点击的按钮的索引
            that.getIndex(this);
        }
    }
}
Tab.prototype.hide = function(){
    // 隐藏上一个内容
    this.li[this.index].className = "";
    this.div[this.index].style.display = "none";
}
Tab.prototype.getIndex = function(now){
    // 获取点击按钮的索引
    // console.log(now.xuhao);
    // 将当前按钮的索引设置给之前的默认索引（今天是明天的昨天）
    this.index = now.xuhao;
    // 执行根据点击按钮的索引，显示当前内容
    this.show();
}
Tab.prototype.show = function(){
    // 根据点击按钮的索引，显示当前内容
    this.li[this.index].className = "active";
    this.div[this.index].style.display = "block";
}
 var t = new Tab();

}
}
new Projects()


// 搜索栏

    const obox=document.querySelector(".search")
        const otxt = document.querySelector(".inp")
        const olist = document.getElementById("list")
        const ali = olist.children;
        var flag=0;
        var index = 0;
      
    const url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
    otxt.oninput = function(){
        if(this.value === ""){
            olist.innerHTML = "";
              olist.style.border="none"
            return;
            
        }
        // 处理要想百度发送的数据
        const str = `wd=${this.value}&cb=aaaaaaa`;
        // 创建script标签，将数据拼接到url，准备jsonp请求
        const script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);

        window.aaaaaaa = function(res){
            // console.log(res.s);
            let str = "";
            for(let i=0;i<res.s.length;i++){
                str += `<li>${res.s[i]}</li>`
            //   olist.style.border="2px solid blue"  
            }
            olist.innerHTML = str;
            
        }
    } 
    
const oli=document.getElementsByName("li")
    for (let i=0;i<oli.length;i++){
        oli[i].onmousemove =function(){
            oli[i].style.background="pink"
        }
    }
    // setDefault()
    for(let i=0;i<ali.length;i++){
        ali[i].xuhao =i;
        ali[i].onmoiusemove=function(){
            this.className = "hover"
            ali[i].onmouseout = function(){
                this.className ="";
            } 
           
            ali.onclick=function(){
                console.log(ali.index);
                ali[index].lastElementChild.remove();
                index = this.xuhao;
                setDefault()
                flag = 0;
                
               otxt.value=this.ali.innerHTML
            }

    }
    }
        for (let i=0;i<ali.length;i++){
            ali[i].xuhao = i;
            ali[i].onmoiuseover=function(){
                this.className="hover"
            }
            ali[i].onmouseout =function(){
                this.className ="";
            }
        
        ali[i].onclick = function(){
          otxt.innerHTML = ""
            index = this.xuhao ;
           
        }
 
        }

        
   olist.onclick = function(){
        otxt.value=ali.innerHTML
        // 判断状态，决定下拉菜单的显示或隐藏，同时更新状态
        if(flag === 0){ 
           
            olist.style.display = "block";
             otxt.innerHTML = ""
            flag = 1;
        }else{ 
           
            olist.style.display = "none";
            flag = 0;
        }

    }





    